<template>
	<view class="question">
		<scroll-view class="content" scroll-y="true">
			<view class="item" :class="{reverse:item.role=='user'}"   v-for="(item,index) in historys">
				<uni-icons style="border: 0;" :type="item.role=='user'?'contact-filled':'help'" color="purple" size="25"></uni-icons>
				<text>{{item.content}}</text>				
			</view>
		</scroll-view>
		<view class="bottom">
			<uni-easyinput v-model="word" placeholder="请输入问题" />
			<button type="default" @tap="question" size="mini">提问</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from '../../utils/config';
	// 问话模型
	let model = ref({
		"model": "moonshot-v1-8k",
		"messages": [],
		"temperature": 0.3
	})
	let historys = ref([])
	let word = ref("")
	async function question() {
		historys.value.push({
			"role": "user",
			"content": word.value
		})
		model.value.messages = historys.value
		let res = await uni.$post(CONFIG.kimi_url, model.value)
		historys.value.push(res.data.choices[0].message)
		console.log(historys.value)
		word.value = ""

	}
</script>

<style scoped lang="scss">
	.question {
		position: relative;
		height: calc(100vh - 97px);

		.content {
			height: calc(100vh - 140px);

			.item {
				display: flex;
				padding: 5px;

				text {
					border: 1px solid #ccc;
					border-radius: 5px;
					padding: 3px;
				}
			}

			.reverse {
				flex-direction: row-reverse;
			}
		}

		.bottom {
			padding: 3rpx 5rpx;
			border: 1px solid red;
			width: 750rpx;
			display: flex;
			position: absolute;
			bottom: 0;

			button {
				margin-right: 5px;
			}
		}
	}
</style>